<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>工序参数配置</span>
          <el-button link @click="goBack">返回工序列表</el-button>
        </div>
      </template>

      <div v-if="process" class="process-info">
        <el-descriptions title="工序信息" :column="3" border>
          <el-descriptions-item label="工序编号">{{ process.code }}</el-descriptions-item>
          <el-descriptions-item label="工序名称">{{ process.name }}</el-descriptions-item>
          <el-descriptions-item label="工序类型">{{ process.typeName }}</el-descriptions-item>
          <el-descriptions-item label="标准工时">{{ process.standardTime }} 分钟</el-descriptions-item>
          <el-descriptions-item label="状态" :span="2">
            <el-tag v-if="process.status === 0" type="danger">停用</el-tag>
            <el-tag v-else type="success">正常</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="工序描述" :span="3">{{ process.description }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <el-divider content-position="center">参数列表</el-divider>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAddParam"
            v-hasPermi="['qep:processParam:add']"
          >新增参数</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDeleteParams"
            v-hasPermi="['qep:processParam:remove']"
          >批量删除</el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="paramsList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="参数名称" prop="name" />
        <el-table-column label="参数编号" prop="code" />
        <el-table-column label="参数类型" prop="type">
          <template #default="scope">
            <el-tag v-if="scope.row.type === '1'" type="primary">数值型</el-tag>
            <el-tag v-else-if="scope.row.type === '2'" type="success">文本型</el-tag>
            <el-tag v-else-if="scope.row.type === '3'" type="warning">日期型</el-tag>
            <el-tag v-else-if="scope.row.type === '4'" type="info">选择型</el-tag>
            <el-tag v-else>{{scope.row.type}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="单位" prop="unit" />
        <el-table-column label="标准值" prop="standardValue" />
        <el-table-column label="公差上限" prop="upperTolerance" />
        <el-table-column label="公差下限" prop="lowerTolerance" />
        <el-table-column label="必填" prop="required">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.required === 1">是</el-tag>
            <el-tag type="info" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort" width="60" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="handleEditParam(scope.row)"
              v-hasPermi="['qep:processParam:edit']"
            >修改</el-button>
            <el-button
              link
              type="primary"
              icon="Delete"
              @click="handleDeleteParam(scope.row)"
              v-hasPermi="['qep:processParam:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加或修改参数对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="paramForm" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="参数名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入参数名称" />
        </el-form-item>
        <el-form-item label="参数编号" prop="code">
          <el-input v-model="form.code" placeholder="请输入参数编号" />
        </el-form-item>
        <el-form-item label="参数类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择参数类型">
            <el-option label="数值型" value="1" />
            <el-option label="文本型" value="2" />
            <el-option label="日期型" value="3" />
            <el-option label="选择型" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入参数单位" />
        </el-form-item>
        <el-form-item label="标准值" prop="standardValue">
          <el-input v-model="form.standardValue" placeholder="请输入标准值" />
        </el-form-item>
        <el-form-item label="公差上限" prop="upperTolerance">
          <el-input v-model="form.upperTolerance" placeholder="请输入公差上限" />
        </el-form-item>
        <el-form-item label="公差下限" prop="lowerTolerance">
          <el-input v-model="form.lowerTolerance" placeholder="请输入公差下限" />
        </el-form-item>
        <el-form-item label="是否必填" prop="required">
          <el-radio-group v-model="form.required">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { getProcess } from '@/api/qep/process';
import { getProcessParamsByProcessId, addProcessParam, updateProcessParam, delProcessParam, batchDelProcessParam } from '@/api/qep/processParam';
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();

// 遮罩层
const loading = ref(false);
// 选中数组
const ids = ref([]);
// 非多个禁用
const multiple = ref(true);
// 弹出层标题
const title = ref("");
// 是否显示弹出层
const open = ref(false);
// 工序信息
const process = ref(null);
// 参数列表
const paramsList = ref([]);

// 表单参数
const form = reactive({
  id: undefined,
  processId: undefined,
  name: undefined,
  code: undefined,
  type: undefined,
  unit: undefined,
  standardValue: undefined,
  upperTolerance: undefined,
  lowerTolerance: undefined,
  required: 1,
  sort: 0,
  remark: undefined
});

// 定义参数类型选项
const paramTypeOptions = [
  { value: "1", label: "数值型" },
  { value: "2", label: "文本型" },
  { value: "3", label: "日期型" },
  { value: "4", label: "选择型" }
];

// 表单校验
const rules = reactive({
  name: [
    { required: true, message: "参数名称不能为空", trigger: "blur" }
  ],
  code: [
    { required: true, message: "参数编号不能为空", trigger: "blur" }
  ],
  type: [
    { required: true, message: "参数类型不能为空", trigger: "change" }
  ]
});

onMounted(() => {
  // 获取工序ID参数
  const processId = route.query.processId;
  if (processId) {
    // 获取工序信息
    getProcess(processId).then(response => {
      process.value = response.data;
      // 获取工序参数列表
      getProcessParams(processId);
    });
  } else {
    ElMessage.error("未找到工序ID参数");
    router.push({ path: '/basic/process' });
  }
});

/** 获取工序参数列表 */
function getProcessParams(processId) {
  loading.value = true;
  getProcessParamsByProcessId(processId).then(response => {
    paramsList.value = response.data;
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  });
}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}

/** 表单重置 */
function reset() {
  form.id = undefined;
  form.processId = process.value ? process.value.id : undefined;
  form.name = undefined;
  form.code = undefined;
  form.type = undefined;
  form.unit = undefined;
  form.standardValue = undefined;
  form.upperTolerance = undefined;
  form.lowerTolerance = undefined;
  form.required = 1;
  form.sort = 0;
  form.remark = undefined;
  proxy.resetForm("paramForm");
}

/** 返回工序列表 */
function goBack() {
  router.push({ path: '/basic/process' });
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  multiple.value = !selection.length;
}

/** 新增参数按钮操作 */
function handleAddParam() {
  reset();
  open.value = true;
  title.value = "添加工序参数";
}

/** 修改参数按钮操作 */
function handleEditParam(row) {
  reset();
  const id = row.id;
  Object.assign(form, row);
  open.value = true;
  title.value = "修改工序参数";
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["paramForm"].validate(valid => {
    if (valid) {
      if (form.id) {
        updateProcessParam(form).then(response => {
          ElMessage.success("修改成功");
          open.value = false;
          getProcessParams(process.value.id);
        });
      } else {
        addProcessParam(form).then(response => {
          ElMessage.success("新增成功");
          open.value = false;
          getProcessParams(process.value.id);
        });
      }
    }
  });
}

/** 删除参数按钮操作 */
function handleDeleteParam(row) {
  const paramIds = row.id;
  ElMessageBox.confirm('是否确认删除参数名称为"' + row.name + '"的数据项?', "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(function() {
    return delProcessParam(paramIds);
  }).then(() => {
    getProcessParams(process.value.id);
    ElMessage.success("删除成功");
  }).catch(() => {});
}

/** 批量删除参数按钮操作 */
function handleDeleteParams() {
  const paramIds = ids.value.join(",");
  ElMessageBox.confirm('是否确认删除选中的' + ids.value.length + '条数据项?', "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(function() {
    return batchDelProcessParam(paramIds);
  }).then(() => {
    getProcessParams(process.value.id);
    ElMessage.success("删除成功");
  }).catch(() => {});
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.process-info {
  margin-bottom: 20px;
}
</style> 